<template>
  <div class="top">
    <div class="name" :class="{ overstriking: istop }">
      <i v-show="istop" class="el-icon-s-home icon" />{{ item.name }}
    </div>
    <div class="principal">{{ item.manager }}</div>

    <div class="action">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          操作<i class="el-icon-arrow-down el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="add"> 添加子部门</el-dropdown-item>
          <el-dropdown-item
            v-if="!istop"
            command="look"
          >查看部门</el-dropdown-item>
          <el-dropdown-item
            v-if="!istop"
            command="del"
          >删除部门</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { companyDepartmentDelete } from '@/api/departments.js'

export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    istop: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    handleCommand(command) {
      switch (command) {
        case 'add':
          this.$bus.$emit('openPopout', true, this.item, 'add')
          break
        case 'look':
          this.$bus.$emit('openPopout', true, this.item, 'look')
          break
        case 'del':
          this.$confirm('确定删除该部门嘛?', '提示')
            .then(async() => {
              // console.log('成功')
              const res = await companyDepartmentDelete(this.item.id)
              this.$message.success('删除部门成功')
              this.$emit('getData')
            })
            .catch(() => {
              this.$message('已取消删除')
            })
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
  .icon {
    font-size: 20px;
    margin-right: 10px;
  }
  .overstriking {
    font-weight: 700;
  }
  .name {
    flex: 1;
    .icon {
      font-size: 20px;
      margin-right: 5px;
    }
  }
  .principal {
    width: 80px;
    text-align: center;
    margin-right: 15px;
  }
}
</style>
